import { useEffect, useState } from 'react'
import './chat.scss'
import axios from '@/http'
import { TBlogChat } from '@type'
import { Pagination, PaginationProps } from 'antd'
import * as echarts from 'echarts/core'
import { ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer])
type TChart<T> = T extends Object ? { [key in keyof T]: T[key][] } : null
// declare const echarts: any

const Chart = () => {
  const formatter = (value: string) => {
    return value.length > 6 ? `${value.substring(0, 6)}...` : value
  }
  const onChange: PaginationProps['onChange'] = (page, size) => {
    setCurrent(page)
    setChartData(chartDataList, page, size)
  }
  const [dataList, setDataList] = useState<TBlogChat[]>([])
  const [chartDataList, setChartDataList] = useState<TChart<TBlogChat>>({
    seeNum: [],
    commentLength: [],
    title: [],
    goodNum: [],
    collectNum: []
  })
  const [current, setCurrent] = useState(1)
  const pageProp = {
    pageSizeOptions: [6, 8, 10, 15],
    onChange,
    current,
    showSizeChanger: true,
    defaultPageSize: 6
  }
  const filterData = (data: Array<any>, pageNum: number, size: number) => {
    return data.filter((_, index) => (pageNum - 1) * size <= index && index < pageNum * size)
  }
  const chartConfig: ['seeNum', 'commentLength', 'title', 'goodNum', 'collectNum'] = [
    'seeNum',
    'commentLength',
    'title',
    'goodNum',
    'collectNum'
  ]
  const setChartData = (chartDataList: TChart<TBlogChat>, num: number, size: number) => {
    const Xdata = filterData(chartDataList.title, num, size)
    const seeData = filterData(chartDataList.seeNum, num, size)
    const goodData = filterData(chartDataList.goodNum, num, size)
    const commentData = filterData(chartDataList.commentLength, num, size)
    const collectData = filterData(chartDataList.collectNum, num, size)
    setoption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: [{ type: 'category', data: Xdata, axisLabel: { interval: 0, formatter } }],
      yAxis: { type: 'value' },
      legend: {
        data: ['观看数', '点赞数', '收藏数', '评论数']
      },
      series: [
        {
          type: 'bar',
          data: seeData,
          name: '观看数',
          label: {
            show: true,
            position: 'top'
          },

          emphasis: {
            focus: 'series'
          }
        },
        {
          type: 'bar',
          data: goodData,
          name: '点赞数',
          label: {
            show: true,
            position: 'top'
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          type: 'bar',
          data: collectData,
          label: {
            show: true,
            position: 'top'
          },
          name: '收藏数',
          emphasis: {
            focus: 'series'
          }
        },
        {
          type: 'bar',
          data: commentData,
          label: {
            show: true,
            position: 'top'
          },
          name: '评论数',
          emphasis: {
            focus: 'series'
          }
        }
      ]
    })
  }
  const getNumList = () => {
    return axios.get('/blog/numlist').then(res => {
      const data: TBlogChat[] = res.data.data
      const chartData: TChart<TBlogChat> = {
        seeNum: [],
        commentLength: [],
        title: [],
        goodNum: [],
        collectNum: []
      }

      chartConfig.forEach(item => {
        chartData[item] = data.map(items => items[item]) as string[] & number[]
      })
      setDataList(data)
      setChartDataList(chartData)
      setChartData(chartData, 1, 6)
    })
  }
  const [option, setoption] = useState<any>({})
  const [myChat, setmyChat] = useState<any>(undefined)
  const drawChart = () => {
    myChat && myChat.setOption(option, true)
  }
  useEffect(() => {
    var dom = document.getElementById('main')
    dom && setmyChat(echarts.init(dom))
    getNumList()
  }, [])
  useEffect(() => {
    drawChart()
  }, [option])
  return (
    <>
      <div id="main"></div>
      <div style={{ textAlign: 'center' }}>
        <Pagination total={dataList.length} {...pageProp} />;
      </div>
    </>
  )
}
export default Chart
